<!-- 评论列表 -->
<template>
	<view
		:style="'order:'+Item.order+';'+Item.css"
		class="list-comment">
		<template v-if="list_state == 'success'">
			<view
				@click="Item.replyToComment?clickSelected(item.cid,item.author.nickname):$_To('comment/comment?cid=' + item.cid)"
				class="for"
				v-for="item in list">
				<view class="left" @click.stop="$_To('user/user?uid=' + item.author.uid)">
					<view class="avatar">
						<image :src="item.author.avatar" mode="widthFix"></image>
					</view>
					<view
						class="roleName"
						:style="'background:'+item.author.nicknameColor+';'">{{item.author.roleName[0]}}</view>
				</view>
				<view class="right">
					<view class="top">
						<view class="top-left">
							<text class="nickname">{{item.author.nickname}}</text>
							<text class="roleName" :style="'color:'+item.author.nicknameColor+';'">
								{{item.author.roleName}}
							</text>
						</view>
						<view class="top-right">
							<view @click.stop="clickOperate('like',item)">
								<text class="iconfont icon-good"></text>
								<text class="db">
									{{item.likeCount ? item.likeCount : '赞'}}
								</text>
							</view>
							<view @click.stop="clickOperate('dislike',item)">
								<text class="iconfont icon-bad"></text>
								<text class="db">
									{{item.dislikeCount ? item.dislikeCount : '踩'}}
								</text>
							</view>
						</view>
					</view>
					<view class="reply-to-comment" v-if="item.replyToComment">
						{{$_filterHtml(item.replyToComment.content)}}
					</view>
					<view class="_content">
						<mp-html
							:content="$_contentObservers(item.content)"
							selectable="true"></mp-html>
					</view>
					<template v-if="item.files.audios.length">
						<template v-for="(audios,index) in item.files.audios">
							<view style="margin-top: 20rpx;padding-bottom: 20rpx;">
								<public-audio
									Css="width:350rpx;"
									:Url="audios.audioUrl"></public-audio>
							</view>
						</template>
					</template>
					<template v-if="item.files.images.length">
						<view class="files-image">
							<view
								@click.stop="$_picturePreview(index,item.files.images)"
								v-for="(img,index) in item.files.images">
								<image :src="img.imageSquareUrl" mode="widthFix"></image>
							</view>
						</view>
					</template>
					<template v-if="item.files.videos.length">
						<view
							@click.stop="$_To('public/video?url=' + video.videoUrl)"
							v-for="video in item.files.videos"
							class="files-video"
							:style="'background: #EBEEF5 url('+video.videoPosterUrl+');background-size: 100%;background-repeat: no-repeat;background-position: center;'">
							<text class="iconfont icon-play"></text>
						</view>
					</template>
					<view
						v-if="item.subComments"
						class="sub-comments">
						<view
							v-for="subComments in item.subComments"
							class="sub-comments-for">
							<text class="sub-comments-for-nickname">
								{{subComments.author.nickname}}：
							</text>
							<text class="sub-comments-for-content">
								{{$_filterHtml(subComments.content)}}
							</text>
						</view>
						<view class="sub-comments-info">
							共 {{item.commentCount}} 个评论
						</view>
					</view>
					<view
						v-if="Item.replyToComment"
						class="info">
						<view class="commentCount">回复</view>
						<view class="createTime">{{item.createdTimeAgo}}</view>
						<view
							@click.stop="clickDeleteComment(item.cid)"
							class="delete"
							v-if="item.editControls.canDelete">删除</view>
					</view>
					<view
						v-if="!Item.replyToComment"
						class="info">
						<view class="commentCount" v-if="!item.subComments">
							0 评论 >
						</view>
						<view class="createTime">{{item.createdTimeAgo}}</view>
						<view
							@click.stop="clickDeleteComment(item.cid)"
							class="delete"
							v-if="item.editControls.canDelete">删除</view>
					</view>
				</view>
			</view>
			<view
				v-if="Item.page"
				@click="getList('more')"
				class="more">点击加载更多</view>
		</template>
		<template v-if="list_state == 'loading'">
			<view class="skeleton-screen" v-for="item in Item.query.pageSize?Item.query.pageSize:1">
				<view class="left loading-css"></view>
				<view class="right">
					<view class="loading-css"></view>
					<view class="loading-css"></view>
					<view class="loading-css"></view>
				</view>
			</view>
		</template>
		<template v-if="list_state == 'empty'">
			<public-empty></public-empty>
		</template>
	</view>
</template>

<script>
	export default {
		name:"list-comment",
		props:{
			Item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				list:[],
				list_state:"loading",
				listPage:2,
				replyToComment:false
			};
		},
		mounted(){
			this.getList();
		},
		// 卸载组件
		destroyed(){
			
		},
		methods: {
			getList(more){
				if(more == 'more'){uni.showLoading({ title: "加载中" });}
				this.$_Request(
					"GET","/api/v2/comment/list",
					{
						"mapId": this.Item.query.mapId,
						"mapLng": this.Item.query.mapLng,
						"mapLat": this.Item.query.mapLat,
						"uidOrUsername": this.Item.query.uidOrUsername,
						"pid": this.Item.query.pid,
						"cid": this.Item.query.cid,
						"hid": this.Item.query.hid,
						"gid": this.Item.query.gid,
						"includeSubgroups": this.Item.query.includeSubgroups,
						"sticky": this.Item.query.sticky,
						"allDigest": this.Item.query.allDigest,
						"digestState": this.Item.query.digestState,
						"contentType": this.Item.query.contentType,
						"createdDays": this.Item.query.createdDays,
						"createdDate": this.Item.query.createdDate,
						"createdDateGt": this.Item.query.createdDateGt,
						"createdDateLt": this.Item.query.createdDateLt,
						"likeCountGt": this.Item.query.likeCountGt,
						"likeCountLt": this.Item.query.likeCountLt,
						"followCountGt": this.Item.query.followCountGt,
						"followCountLt": this.Item.query.followCountLt,
						"blockCountGt": this.Item.query.blockCountGt,
						"blockCountLt": this.Item.query.blockCountLt,
						"commentCountGt": this.Item.query.commentCountGt,
						"commentCountLt": this.Item.query.commentCountLt,
						"orderType": this.Item.query.orderType,
						"orderDirection": this.Item.query.orderDirection,
						"pageSize": this.Item.query.pageSize,
						"page":more == 'more' ? this.listPage : "",
						"whitelistKeys":"cid,author.username,author.uid,author.avatar,author.nickname,author.nicknameColor,author.roleName,likeCount,dislikeCount,content,commentCount,createdTimeAgo,location,files,replyToComment.cid,replyToComment.content,interaction,editControls,subComments.0.author.nickname,subComments.0.content,subComments.1.author.nickname,subComments.1.content,subComments.2.author.nickname,subComments.2.content,subComments.3.author.nickname,subComments.3.content,subComments.4.author.nickname,subComments.4.content"
					},
					(res) => {
						if(more == 'more'){
							if(res.data.data.list.length){
								this.list = this.list.concat(res.data.data.list);
								this.listPage++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							if(res.data.data.list.length){
								this.list = res.data.data.list;
								uni.hideLoading();
								this.list_state = "success"
							}else{
								this.list_state = "empty"
							}
						}
					}
				)
			},
			clickOperate(type,item){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/user/mark",
					{
						"interactionType":type,
						"markType":"comment",
						"fsid":item.cid
					},
					(res) => {
						if(res.data.code == 0){
							this.getList()
							uni.hideLoading();
						}else{
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 1000
							});
						}
					}
				)
			},
			clickSelected(cid,username){
				uni.$emit('cidValueTransfer',{
					cid:cid,
					username:username
				})
			},
			// 删除评论按钮
			clickDeleteComment(cid){
				uni.showModal({
					title: "提示",
					content: "是否删除本评论？",
					success: (res) => {
						if(res.confirm) {
							uni.showLoading();
							this.$_Request(
								"DELETE","/api/v2/comment/" + cid, {},
								(res_) => {
									if(res_.data.code == 0){
										this.getList();
										uni.hideLoading();
									}else{
										uni.showToast({
											title: res_.data.message,
											icon: "none",
											duration: 1000
										});
									}
								}
							)
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.list-comment{
	.for{
		padding: 25rpx 0;
		display: flex;
		border-bottom: 1rpx dashed $BianKuangSe;
		.left{
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
			overflow: hidden;
			position: relative;
			.avatar{
				width: 80rpx;
				height: 80rpx;
				overflow: hidden;
				border-radius: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				background: $BeiJingSe;
			}
			.roleName{
				width: 30rpx;
				height: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: 2;
				border: .5px solid #FFF;
				color: #FFF;
				background: $FuZhuSe;
				font-size: 18rpx;
				line-height: 18rpx;
				border-radius: 100rpx;
			}
		}
		.right{
			margin-left: 25rpx;
			flex: 1;
			.top{
				display: flex;
				align-items: center;
				.top-left{
					flex: 1;
					.nickname{
						padding-right: 10rpx;
						font-weight: bold;
					}
					.roleName{
						font-size: 22rpx;
						line-height: 22rpx;
						color: $ZhanWeiSe;
					}
				}
				.top-right{
					display: flex;
					align-items: center;
					view{
						display: flex;
						align-items: center;
						padding-left: 15rpx;
						.iconfont{
							font-size: 35rpx;
							line-height: 35rpx;
							padding-right: 5rpx;
						}
						.db{
							font-size: 28rpx;
							line-height: 28rpx;
						}
					}
				}
			}
			.reply-to-comment{
				background: $BeiJingSe;
				color: $ZhanWeiSe;
				font-size: 28rpx;
				line-height: 40rpx;
				padding: 10rpx 15rpx;
				margin: 15rpx 0 10rpx 0;
			}
			._content{
				line-height: 45rpx;
				margin-top: 5rpx;
			}
			.files-video{
				width: 400rpx;
				height: 200rpx;
				margin: 15rpx 0 25rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				.icon-play{
					font-size: 80rpx;
					line-height: 80rpx;
					color: #FFF;
					text-shadow: 0 0 5rpx #000;
				}
			}
			.files-image{
				display: flex;
				flex-wrap: wrap;
				margin-top: 15rpx;
				view{
					width: 150rpx;
					height: 150rpx;
					overflow: hidden;
					margin: 10rpx 10rpx 0 0;
				}
			}
			.sub-comments{
				background: $BeiJingSe;
				margin: 20rpx 0 20rpx 0;
				padding: 10rpx 0 20rpx 0;
				border-radius: 10rpx;
				.sub-comments-for{
					line-height: 40rpx;
					padding: 10rpx 25rpx 0 25rpx;
					.sub-comments-for-nickname{
						color: $ShenLanSe;
						font-size: 28rpx;
					}
					.sub-comments-for-content{
						font-size: 28rpx;
					}
				}
				.sub-comments-info{
					font-size: 28rpx;
					line-height: 28rpx;
					color: $ShenLanSe;
					padding: 20rpx 20rpx 0 20rpx;
				}
			}
			.info{
				display: flex;
				align-items: center;
				margin-top: 15rpx;
				.commentCount{
					font-size: 22rpx;
					line-height: 22rpx;
					background: $BeiJingSe;
					padding: 10rpx 15rpx;
					border-radius: 100rpx;
					margin-right: 15rpx;
				}
				.createTime{
					font-size: 22rpx;
					line-height: 22rpx;
					color: $ZhanWeiSe;
				}
				.delete{
					font-size: 22rpx;
					line-height: 22rpx;
					color: $ZhanWeiSe;
					margin-left: auto;
				}
			}
		}
	}
	.more{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		line-height: 28rpx;
		color: $ZhanWeiSe;
		padding: 35rpx 0;
	}
}
.skeleton-screen{
	padding: 25rpx 0;
	display: flex;
	border-bottom: 1rpx dashed $BianKuangSe;
	.left{
		width: 80rpx;
		height: 80rpx;
		border-radius: 100%;
		margin-right: 25rpx;
	}
	.right{
		flex: 1;
		view:nth-child(1){
			width: 100%;
			height: 40rpx;
		}
		view:nth-child(2){
			width: 100%;
			height: 100rpx;
			margin: 25rpx 0;
		}
		view:nth-child(3){
			width: 100%;
			height: 40rpx;
		}
	}
}
</style>